<template>
  <div class="wrapper">
    <!-- 隐藏图表的按钮 -->
    <div class="expand-btn" :class="!visible && 'closed'" @click="handleToggle">
      <img :src="collapse" />
    </div>
    <DropDown></DropDown>

    <div class="content">
      <PageTitle :title="title" />
      <transition name="fade">
        <div class="body" v-show="visible">
          <router-view />
        </div>
      </transition>
    </div>
    <VideoDialog
      :visible="videoDialogVisible"
      :video-src="videoSrc"
      :type="videoType"
      @close="handleCloseVideoDialog"
    />
  </div>
</template>

<script>
import PageTitle from '@/components/PageTitle'
import collapse from '@/assets/collapse.png'
import VideoDialog from '@/components/VideoDialog.vue'
import DropDown from './DropDown.vue'

export default {
  components: {
    PageTitle,
    VideoDialog,
    DropDown
  },
  data () {
    return {
      collapse,
      btnAct: false,
      ishow: false,
    }
  },
  mounted () {
    let that = this
    window.addEventListener('postMessage_click', function (e) {
      let data = e.data.data
      if (data.k == 2) {
        // 点击小区一定要展开
        that.btnAct = false
        if (that.$route.name != 'Community')
          that.$router.push({
            name: 'Community'
          })
        that.$store.commit('SET_VISIBLE', true)
        // that.$store.commit('CHANGE_INFO', e.data.data.name)yout
        that.$service.mock.mockConfig({}).then(res => {
          if (data.name.indexOf('安居苑') >= 0) {
            that.$store.commit('SET_COMMUNITY_INFO', res.communityInfo1)
          } else if (data.name.indexOf('武房二期') >= 0) {
            that.$store.commit('SET_COMMUNITY_INFO', res.communityInfo2)
          }
        })
      }
    })
    window.addEventListener('postMessage_mouse', function (e) {
      let data = e.data.data
      if (data.k == 0) {
        if (that.$route.name != 'District')
          that.$router.push({
            name: 'District'
          })
        // 判断是否为主动关闭
        if (!that.btnAct && !that.visible)
          that.$store.commit('SET_VISIBLE', true)
      }
    })
  },
  computed: {
    visible () {
      return this.$store.getters.visible
    },
    title () {
      return this.$store.getters.title
    },
    videoDialogVisible () {
      return this.$store.getters.videoDialog.visible
    },
    videoType () {
      return this.$store.getters.videoDialog.type
    },
    videoSrc () {
      return this.$store.getters.videoDialog.videoSrc
    }
  },
  methods: {
    handleToggle () {
      this.btnAct = true
      this.$store.commit('SET_VISIBLE', !this.visible)
    },
    handleCloseVideoDialog () {
      const param = {
        visible: false,
        type: '',
        videoSrc: ''
      }
      this.$store.commit('SET_VIDEO_DIALOG', param)
    }
  }
}
</script>

<style lang="scss">
.wrapper {
  height: 100%;

  .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    pointer-events: none;

    .body {
      width: 100%;
      height: calc(100% - 80px);
      pointer-events: none;
    }
  }
}

.expand-btn {
  width: $base * 44px;
  height: $base * 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: $base * 116px;
  background: $bg;
  cursor: pointer;
  pointer-events: auto;

  &.closed {
    img {
      transform: rotateY(-180deg);
    }
  }

  img {
    width: $base * 24px;
    height: $base * 30px;
  }
}

.expand-btn1 {
  width: $base * 344px;
  height: $base * 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: $base * 116px;
  background: $bg;
  cursor: pointer;
  pointer-events: auto;

  &.closed {
    img {
      transform: rotateY(-180deg);
    }
  }

  img {
    width: $base * 24px;
    height: $base * 30px;
  }
}

.fade-enter {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-enter-active {
  transition: 1s all;
}

.fade-leave {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-leave-active {
  transition: 1s all;
}
</style>